<template>
    <div>
      <header-tilte :title="title"></header-tilte>
      <div class="flex_center">
        <div class="bodyContent">
          <p class="warnning" v-if="isShowWarnning == 1">
            <i class="fa fa-bell-o"></i>
            您当前使用的手机号为:<span class="warnning_mobile">{{mobile | hiddenMobile}}</span>
          </p>
          <mu-container class="phoneC_content">
            <mu-form ref="form" :model="phoneC" class="mu-demo-form" :label-position="labelPosition" label-width="72">
              <mu-form-item prop="mobile" label="联系电话" :rules="mobileRules" class="imgCodeDiv positon_re margin_bom0">
                <mu-text-field v-model="phoneC.mobile" prop="mobile"></mu-text-field>
                <div class="imgCodeBotton positon_ab">
                  <mu-button color="primary" v-if="countDownTime <=0" @click="getCode()">获取动态码</mu-button>
                  <mu-button disabled v-if="countDownTime >0">发送动态码({{countDownTime}}s)</mu-button>
                </div>
              </mu-form-item>
              <mu-form-item prop="imgCode" label="图形码" :rules="imgCodeRules" class="imgCodeDiv positon_re margin_bom0">
                <mu-text-field v-model="phoneC.imgCode" prop="imgCode"></mu-text-field>
                <div class="imgCodeBotton positon_ab">
                  <img class="imgCodeUrl" :src="phoneC.imgCodeUrl" @click="getCodeUrl">
                </div>
              </mu-form-item>
              <mu-form-item prop="code" label="动态码" :rules="codeRules" class="margin_bom0">
                <mu-text-field v-model="phoneC.code" prop="code"></mu-text-field>
              </mu-form-item>
              <mu-form-item class="address_button">
                <mu-button color="primary" @click="submit">提交</mu-button>
                <!--<mu-button @click="clear">重置</mu-button>-->
              </mu-form-item>
            </mu-form>
          </mu-container>
        </div>
      </div>
    </div>
</template>

<script>
    import HeaderTilte from "../headerTilte";
    import Rules from '../../components/Rules'
    import Qs from 'qs'
    export default {
      components: {HeaderTilte},
      name: "phone_check",
      data(){
        return{
          title:'手机验证',
          mobile:'',
          isShowWarnning:0,
          labelPosition: 'left',
          countDownTime:0,
          phoneC: {
            mobile: '',
            imgCode: '',
            code: '',
            imgCodeUrl:'',
          },
          mobileRules: [
            { validate: (val) => Rules.required(val), message: '请填写手机号'},
            { validate: (val) => Rules.phone(val), message: '手机号格式错误'},
          ],
          imgCodeRules: [
            { validate: (val) => Rules.required(val), message: '请填写图形码'},
          ],
          codeRules: [
            { validate: (val) => Rules.required(val), message: '请填写动态码'},
          ],
          changeImgUrl:0,
        }
      },
      mounted(){
        this.checkLogin();//检查登录状态
        this.mobile = this.getCache('login_key').mobile;
        //如果为空
        if(!this.isEmpty(this.mobile)){
          this.isShowWarnning = 1;
          this.title = '修改手机验证';
        }
        this.$nextTick(function () {
          $('.mu-form-item-label').css('text-align','left');
          $('.mu-radio-label, .mu-text-field-input').css('font-size','0.9rem');
          $('.mu-raised-button .mu-button-wrapper').css('padding','0 8px')
         /* $('.mu-form-item-label').css('width','75px');*/
          /* $('.mu-form-item').css('margin-bottom',0)*/
        })
        this.phoneC.imgCodeUrl = this.yesS.getCodeImg + 'client/captcha'
      },
      methods:{
        submit () {
          this.$refs.form.validate().then((result) => {

            if(result == true){//验证通过

              var _lsef = this;
              var phoneC = this.phoneC
              this.yesS.addInfoMation(
                this.$combineParams({
                  mobile:phoneC.mobile,
                  is_captcha:phoneC.imgCode,
                  captcha:phoneC.code,
                })
              ).then(res => {
                if(res.status == 1){
                  this.$toast.success(res.msg);
                  var type = _lsef.$route.query.type;
                  setTimeout(function () {
                    if(!_lsef.isEmpty(type) && type == 1){
                      _lsef.$router.push({path:'/qds/infoMove'});
                    }else {
                      _lsef.$router.push({path:'/qds/personall'});
                    }
                  },2000)
                }
              })
            }
          });
        },
        getCode(){
          //判断mobile 和 imgCode 是否填写
          if(this.isEmpty(this.phoneC.mobile)){
            this.$toast.warning('请填写手机号');
            return;
          }
          if(this.isEmpty(this.phoneC.imgCode)){
            this.$toast.warning('请填写图形码');
            return;
          }
          var _self = this;
          //生成倒计时

          this.yesS.getSms(
            this.$combineParams({
              mobile: this.phoneC.mobile,
              type:2,
              verify:_self.phoneC.imgCode
            })
          ).then(res => {
            var status = res.status;
            if(status == 1){
              //生成倒计时
              _self.countDownTime = 60;
              var intervarId = setInterval(function () {
                _self.countDownTime--;
                if(_self.countDownTime <= 0){
                  clearInterval(intervarId);
                }
              }, 1000);
            }
          })
        },
        getCodeUrl(){
         $('.imgCodeUrl').attr('src',this.yesS.getCodeImg + 'client/captcha');
        }


      },
      filters: {
        hiddenMobile(value) {
          var mtel = value.substr(0, 3) + '****' + value.substr(6);
          return mtel;
        },

      },
      watch:{
        changeImgUrl: {
          handler(curVal, oldVal) {
           /* this.phoneC.imgCodeUrl = this.$client_captcha;*/
          },
          deep:true
        }
      }
    }
</script>

<style scoped>
  @import "css/phone_check.css";
  /*@import 'http://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css';*/
</style>
